<template lang="pug">
div
  obj-single-select(
    :options="reports",
    key="id",
    label="name",
    :placeholder="placeholder",
    :update="update",
    :selected.sync="report",
    :custom-label="customLabel",
    type="selected",
    @click="click",
    :loading="loading",
    :searchable="true",
  )
</template>

<script>
import { getReports } from '../../vuex/action'
import ObjSingleSelect from './objSingle'

export default {
  name: 'reportSelect',
  components: {
    ObjSingleSelect
  },
  vuex: {
    getters: {
      reports: ({ report }) => report.reports,
    },
    actions: {
      getReports,
    }
  },
  props: ['report', 'user_id'],
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    customLabel(val) {
      const { name, measured_at, created_at, category, status } = val
      // console.log('customLabel', JSON.stringify(val, null, '\t'))
      const time = category === 'pq' ? this.helper.unixToDate(measured_at, 'YYYY-MM-DD HH:mm:ss') : this.helper.unixToDate(created_at, 'YYYY-MM-DD HH:mm:ss')
      return `${name||'无姓名'}, ${time||'无时间'}, ${this.helper.reportCategory(category)}`
    },
    click(e) {
      if (e.target.parentElement.classList.toString() === 'multiselect__tags') {
        this.load()
      }
    },
    load() {
      catchError(async() => {
        this.loading = true
        if (this.user_id) {
          await this.getReports({
            user_id: this.user_id,
            normal: true,
          })
        }
        this.loading = false
      })
    },
    update(val) {
      this.report = val
    }
  },
  created() {
    this.load()
  },
  computed: {
    placeholder() {
      const result = _.find(this.reports, ['id', _.get(this, 'report.id')])
      return result ? result.name : '选择验光报告'
    },
    selected() {
      return this.report
    },
  },
  watch: {

  }
}
</script>

<style lang="sass" scoped>
</style>
